<template>
    <div class="audio-library-container">

        <!-- 乐库展示 -->
        <div v-show="useSystemConfig.showAudioLibraryHall" class="audio-library-hall-container">

            <!-- 乐库导航 -->
            <div class="audio-library-hall-nav">

            </div>

            <!-- 乐库内容 -->
            <div class="audio-library-hall-content">
                <n-scrollbar style="max-height: 225px">
                    <div style="font-size: 2rem;">暂时没有可展示的内容</div>
                </n-scrollbar>
            </div>

        </div>

        <!-- 搜索展示 -->
        <div v-show="!useSystemConfig.showAudioLibraryHall" class="audio-library-list-container">

            <!-- 搜索导航 -->
            <div class="audio-library-list-nav">

                <!-- 返回乐库主页按钮 -->
                <n-tooltip>
                    <template #trigger>
                        <n-button ghost @click="backAudioLibraryHall" style="margin-right: 20px;">
                            <template #icon>
                                <n-icon :component="ArrowBack" />
                            </template>
                        </n-button>
                    </template>
                    返回乐库主页
                </n-tooltip>

                <!-- 猜你喜欢： -->
                <div>猜你喜欢：</div>

                <!-- 猜你喜欢的tag标签 -->
                <n-space>
                    <n-tag v-for="(i, index) in guessYoulikeIt" :key="index" :type="randomNaiveType()" @click="searchKeyWord(i)">
                        {{ i }}
                    </n-tag>
                </n-space>

            </div>

            <!-- 搜索列表内容 -->
            <div class="audio-library-list-content">

                <!-- 搜索列表 -->
                <n-list class="audio-library-list" clickable hoverable v-if="usePlayList.audioLibrary.length != 0">

                    <!-- 搜索列表头部 -->
                    <template #header>

                        <div style="width: calc(100vw - 256px);display: flex;">
                            <div style="width: 50px;margin-right: 20px;" />
                            <div style="width: calc(100vw - 326px);;display: flex;justify-content: space-around;">
                                <div style="width: 35%;">
                                    搜索列表（{{ usePlayList.audioLibrarySearchCount }}）&nbsp;&nbsp; 歌名
                                </div>
                                <div style="width: 20%;">
                                    专辑/出处
                                </div>
                                <div style="width: 15%;">
                                    作词
                                </div>
                                <div style="width: 10%;">
                                    时长
                                </div>
                                <div style="width: 10%;">
                                    大小
                                </div>
                            </div>
                        </div>

                    </template>

                    <!-- 滚动条 -->
                    <n-scrollbar style="max-height: calc(100vh - 325px)">

                        <!-- 搜索列表展示 -->
                        <n-list-item v-for="(item, index) in usePlayList.audioLibrary" :key="index" @dblclick="playAudioLibrary(item._id as string, item.audioName, item.audioSrc, item.audioCover, index)">

                            <!-- 定位指示/我的最爱 -->
                            <template #prefix>

                                <div style="display: flex;width: 50px;justify-content: space-around;">

                                    <!-- 定位播放 -->
                                    <n-button v-if="item.play" text>
                                        <template #icon>
                                            <n-icon>
                                                <svg class="icon" aria-hidden="true">
                                                    <use xlink:href="#icon-youjiantou"></use>
                                                </svg>
                                            </n-icon>
                                        </template>
                                    </n-button>

                                    <!-- 不定位播放 -->
                                    <n-button v-if="!item.play" text>
                                        <template #icon>
                                            <n-icon />
                                        </template>
                                    </n-button>

                                    <!-- 我的喜欢 -->
                                    <n-button v-if="item.like" text @click="iDontLikeIt(item._id)">
                                        <template #icon>
                                            <n-icon>
                                                <svg class="icon" aria-hidden="true">
                                                    <use xlink:href="#icon-shoucang_shoucang"></use>
                                                </svg>
                                            </n-icon>
                                        </template>
                                    </n-button>

                                    <!-- 不是我的喜欢 -->
                                    <n-button v-if="!item.like" text @click="iLikeIt(item._id)">
                                        <template #icon>
                                            <n-icon>
                                                <svg class="icon" aria-hidden="true">
                                                    <use xlink:href="#icon-shoucang_quxiaoshoucang"></use>
                                                </svg>
                                            </n-icon>
                                        </template>
                                    </n-button>

                                </div>

                            </template>

                            <!-- 列表 -->
                            <div class="audioInfo">

                                <n-performant-ellipsis style="width: 30%;max-width: 30%">
                                    <n-gradient-text
                                        :gradient="`linear-gradient(${useSystemConfig.musicListFontColorDeg}deg, ${useSystemConfig.musicListFontColorStrat} 0%, ${useSystemConfig.musicListFontColorMiddle} 50%, ${useSystemConfig.musicListFontColorEnd} 100%)`"
                                        style="user-select: none;">
                                        {{ (index + 1) + '. ' + item.audioName }}
                                    </n-gradient-text>
                                </n-performant-ellipsis>

                                <n-performant-ellipsis style="width: 25%;max-width: 25%">
                                    <n-gradient-text
                                        :gradient="`linear-gradient(${useSystemConfig.musicListFontColorDeg}deg, ${useSystemConfig.musicListFontColorStrat} 0%, ${useSystemConfig.musicListFontColorMiddle} 50%, ${useSystemConfig.musicListFontColorEnd} 100%)`"
                                        style="user-select: none;">
                                        {{ item.audioVersion }}
                                    </n-gradient-text>
                                </n-performant-ellipsis>

                                <n-performant-ellipsis style="width: 15%;max-width: 15%">
                                    <n-gradient-text
                                        :gradient="`linear-gradient(${useSystemConfig.musicListFontColorDeg}deg, ${useSystemConfig.musicListFontColorStrat} 0%, ${useSystemConfig.musicListFontColorMiddle} 50%, ${useSystemConfig.musicListFontColorEnd} 100%)`"
                                        style="user-select: none;">
                                        作词：{{ item.write }}
                                    </n-gradient-text>
                                </n-performant-ellipsis>

                                <n-performant-ellipsis style="width: 10%;max-width: 10%">
                                    <n-gradient-text
                                        :gradient="`linear-gradient(${useSystemConfig.musicListFontColorDeg}deg, ${useSystemConfig.musicListFontColorStrat} 0%, ${useSystemConfig.musicListFontColorMiddle} 50%, ${useSystemConfig.musicListFontColorEnd} 100%)`"
                                        style="user-select: none;">
                                        {{ item.duration }}
                                    </n-gradient-text>
                                </n-performant-ellipsis>

                                <n-performant-ellipsis style="width: 10%;max-width: 10%">
                                    <n-gradient-text
                                        :gradient="`linear-gradient(${useSystemConfig.musicListFontColorDeg}deg, ${useSystemConfig.musicListFontColorStrat} 0%, ${useSystemConfig.musicListFontColorMiddle} 50%, ${useSystemConfig.musicListFontColorEnd} 100%)`"
                                        style="user-select: none;">
                                        {{ bytesToSize(item.size) }}
                                    </n-gradient-text>
                                </n-performant-ellipsis>

                            </div>

                            <!-- 列表尾部 -->
                            <template #suffix>
                                <n-performant-ellipsis style="max-width: 100%">
                                    <n-gradient-text
                                        :gradient="`linear-gradient(${useSystemConfig.musicListFontColorDeg}deg, ${useSystemConfig.musicListFontColorStrat} 0%, ${useSystemConfig.musicListFontColorMiddle} 50%, ${useSystemConfig.musicListFontColorEnd} 100%)`"
                                        style="user-select: none;">
                                        {{ item.uploader }}
                                    </n-gradient-text>
                                </n-performant-ellipsis>
                            </template>

                        </n-list-item>

                    </n-scrollbar>

                    <template #footer>
                        <div style="display: flex;justify-content: center;">
                            <n-pagination v-model:page="usePlayList.audioLibraryPage" :item-count="usePlayList.audioLibrarySearchCount" @update:page="handleSearchPageChange" />
                        </div>
                    </template>

                </n-list>

            </div>

        </div>

    </div>
</template>
    
<script setup lang='ts'>
import { onMounted, onUnmounted, getCurrentInstance, computed } from 'vue'
import { likeItAudio, dontLikeItAudio } from '../../ajax'
import { usePlayListStore, usePlayConfigStore, useSystemConfigStore } from '../../store'
import { ArrowBack } from '@vicons/tabler'
import { bytesToSize, matchMyLike, randomNaiveType } from '../../util/calculate'
import { useMessage } from 'naive-ui'

onMounted(async () => {

})

onUnmounted(() => {

})

const instance = getCurrentInstance()
const message = useMessage()
const usePlayList = usePlayListStore()
const usePlayConfig = usePlayConfigStore()
const useSystemConfig = useSystemConfigStore()


// 猜你喜欢标签
const guessYoulikeIt = computed(() => {
    let _array: string[] = []
    let array: string[] = []
    usePlayList.audioLibrary.map((item, index) => {
        if (index <= 3) {
            _array.push(item.audioVersion as string)
            _array.push(item.write)
        }
    })

    _array.map(i => {
        if (array.indexOf(i) == -1) {
            array.push(i)
        }
    })
    return array
})



// 返回至乐库大厅
const backAudioLibraryHall = () => {
    useSystemConfig.changeShowAudioLibraryHall(true)
}

// 播放乐库的歌曲
const playAudioLibrary = (_id: string, audioName: string, audioSrc: string, audioCover: string, index: number) => {
    // 播放列表切换至乐库、缓存乐库播放地址、缓存播放列表数组下标
    usePlayConfig.changeAudioId(_id)
    usePlayConfig.changeAudioName(audioName)
    usePlayConfig.changeAudioCover(audioCover)
    usePlayConfig.changeAudioSrc(audioSrc)
    usePlayConfig.changeIndex(index)
    // 清除上次播放列表的定位
    usePlayList.resetPositionAudioInPlayList(usePlayConfig.playListMode)
    // 提交一个乐库播放事件
    instance?.proxy?.$Bus.emit('playAudioLibrary', { playListMode: 'audioLibrary', audioSrc, index })
}
// 点击tag搜索关键字
const searchKeyWord = (str: string) => {
    usePlayList.audioLibraryPage = 1
    instance?.proxy?.$Bus.emit('searchKeyWord', { keyword: str })
}
// 搜索界面添加我的喜欢
const iLikeIt = async (_id: string | undefined) => {

    if (_id == undefined) return;

    // 上传服务器
    const { data } = await likeItAudio(_id, 'none')

    if (data.code == 0) {

        // 添加到本地喜欢
        usePlayList.likePlayList.push(data.audioObj)

        // 匹配搜索列表中是否含有我的喜欢
        await matchMyLike('audioLibrary')
        message.success(data.message)

    } else {

        message.warning(data.message)

    }
}
// 搜索界面取消我的喜欢
const iDontLikeIt = async (_id: string | undefined) => {

    if (_id == undefined) return;

    // 上传服务器
    const { data } = await dontLikeItAudio(_id)
    if (data.code == 0) {

        // 过滤掉不喜欢的
        const array = usePlayList.likePlayList.filter((item) => item.audioId !== _id)
        usePlayList.importLikePlayList(array)

        // 匹配搜索列表中是否含有我的喜欢
        await matchMyLike('audioLibrary')
        message.success(data.message)

    } else {
        message.warning(data.message)
    }

}
// 处理页码变化
const handleSearchPageChange = (page: number) => {
    usePlayList.audioLibraryPage = page
    instance?.proxy?.$Bus.emit('searchKeyWord')
}

</script>
    
<style scoped lang="less">
.audio-library-container {
    overflow: hidden;
    height: calc(100vh - 80px);

    .audio-library-hall-container {
        display: flex;
        flex-wrap: wrap;
        height: calc(100vh - 120px);
        margin-top: 10px;

        .audio-library-hall-nav {
            width: 100%;
            height: 35px;
            margin-bottom: 5px;
        }

        .audio-library-hall-content {
            width: 100%;
            height: calc(100vh - 165px);
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
    }

    .audio-library-list-container {
        display: flex;
        flex-wrap: wrap;
        height: calc(100vh - 120px);
        margin-top: 10px;
        align-content: flex-start;

        .audio-library-list-nav {
            width: 100%;
            height: 35px;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
        }

        .audio-library-list-content {
            width: 100%;
            height: calc(100vh - 225px);

            .audio-library-list {
                width: 100%;
                height: calc(100vh - 225px);

                .audioInfo {
                    width: calc(100vw - 325px);
                    display: flex;
                    justify-content: space-around;
                }
            }
        }

    }

}
</style>